<template>
	<gui-page ref="guipage" :fullPage="true" :customFooter="isHideTabbar" :apiLoadingStatus="apiLoadingStatus"
		:isLoading="pageLoading" :loadmore="true" @loadmorefun="loadData" :refresh="true" @reload="reload">
		<template v-slot:gFixedTop>
			<gui-a-header title="残疾人就业服务平台" :isShowPlace="false" bg="transparent" color="#000"></gui-a-header>
			<view class="top-header">
				<view :style="{'height':navHeight+'px'}"></view>
				<view class="topFixed z-index1">
					<view class="gui-flex gui-align-items-center">
						<view class="left gui-flex gui-align-items-center">
							<image class="icon" src="../../static/index/location.png" mode="widthFix"
								style="height: auto;">
							</image>
							<view class="f24" @click="getLocationFun">
								<text class="qoverDot"
									v-if="addressInfo.city">{{addressInfo.city}}-{{addressInfo.district}}</text>
								<text class="qoverDot" v-else>定位失败</text>
							</view>
						</view>
						<view class="search gui-flex1 bgfff">
							<input type="text" placeholder="输入关键字，搜索您想要的" readonly @click="jumpSearch"
								placeholder-class="plStyle" />
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-slot:gBody>
			<view class="top-header">
				<image class="header-bg" aria-hidden="true" src="../../static/index/index_top_bg.png" mode="widthFix"
					style="height: auto;"></image>
				<view class="box-tip bgfff gui-flex gui-align-items-center z-index1">
					<image class="icon" src="../../static/index/warnning.png" mode="widthFix" style="height: auto;">
					</image>
					<text class="gui-flex1 f22">{{dataResult.context}}</text>
				</view>
				<view class="swiper z-index1">
					<gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" imgMode="scaleToFill" :width="692"
						:height="300" @taped="bannerClick"></gui-swiper>
				</view>
			</view>
			<HomeF ref="homef" @pageChange="pageChange" v-if="isHideTabbar"></HomeF>
			<HomeP ref="homep" @pageChange="pageChange" v-else></HomeP>
			<CautionPopup ref="cautionPopupRef" :dataRes="dataResult" @closed="popupClosed"></CautionPopup>
			<privacySet ref="privacyRef" @initData="init()"></privacySet>
			<official-account></official-account>
		</template>
		<template v-slot:gFooter>
			<!-- 普通模式 -->
			<gui-flex :customClass="['gui-footer', 'gui-footer-border', 'bgfff']" direction="row" :wrap="false"
				alignItems="center" justifyContent="center">
				<view class="gui-footer-icon-buttons" aria-role="button" aria-label="首页" @tap="navChange(0)">
					<image class="tab_icon" v-if="tabIndex != 0" src="@/static/tabbar/index.png" mode="widthFix">
					</image>
					<image class="tab_icon" v-if="tabIndex == 0" src="@/static/tabbar/index_select.png" mode="widthFix">
					</image>
					<text :class="[
								tabIndex == 0 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">首页</text>
				</view>
				<view class="gui-footer-icon-buttons" aria-role="button" aria-label="人才" @tap="navChange(1)">
					<image class="tab_icon" v-if="tabIndex != 1" src="@/static/tabbar/talents.png" mode="widthFix">
					</image>
					<image class="tab_icon" v-if="tabIndex == 1" src="@/static/tabbar/talents_select.png"
						mode="widthFix"></image>
					<text :class="[
								tabIndex == 1 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">人才</text>
				</view>
				<view class="gui-footer-icon-buttons" aria-role="button" aria-label="公司" @tap="navChange(2)">
					<image class="tab_icon" v-if="tabIndex != 2" src="@/static/tabbar/mine.png" mode="widthFix"></image>
					<image class="tab_icon" v-if="tabIndex == 2" src="@/static/tabbar/mine_select.png" mode="widthFix">
					</image>
					<text :class="[
								tabIndex == 2 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">公司</text>
				</view>
			</gui-flex>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	import privacySet from '@/components/wx-privacy/wx-privacy.vue'
	import initLocation from '@/utils/initLocationApp.js'
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import HomeP from '@/components/Home-p/Home-p.vue'
	import HomeF from '@/components/Home-f/Home-f.vue'
	import CautionPopup from '@/components/Caution-popup/Caution-popup.vue'
	import getLocation from '@/utils/initLocationApp.js'
	const $u = reactive(inject('$u'))
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		selectBannerList
	} from '@/api/config.js';
	import {
		selectPromptByOne
	} from '@/api/app.js';
	const privacyRef = ref(null)
	const guipage = ref(null)
	const homef = ref(null)
	const homep = ref(null)
	const cautionPopupRef = ref(null)
	const apiLoadingStatus = ref(false)
	const pageLoading = ref(false)
	const store = useUserStore()
	const {
		isHideTabbar,
		isNotChange,
		addressInfo
	} = storeToRefs(store)
	const swiperItems = ref([])
	const navHeight = ref(getApp().globalData.navHeight)
	const tabIndex = ref(0)

	const dataResult = ref({
		context: ''
	})

	onShow(() => {
		if (isHideTabbar.value && isNotChange.value) {
			store.$patch({
				isNotChange: false
			})
			uni.hideTabBar();
		}
	})

	onLoad(() => {
		loadBanner();
		loadMsg();
	})
	
	onShareAppMessage((res) => {
		return {
			title: '残疾人就业服务平台'
		}
	})
	
	onShareTimeline((res) => {
		return {
			title: '残疾人就业服务平台'
		}
	})

	const popupClosed = () => {
		if (!addressInfo.value.city) {
			getLocationFun();
		}
	}

	const getLocationFun = () => {
		getLocation().then(res => {
			console.log(res);
		})
	}

	const init = () => {
		console.log("拒绝了");
	}

	const navChange = (index) => {
		if (index == 1) {
			$u.to(`/pages/recruit/recruit`, 'switchTab')
		} else if (index == 2) {
			$u.to(`/pages/mine/mine`, 'switchTab')
		}
	}

	const bannerClick = (e) => {
		$u.bannerJump(swiperItems.value[e])
		
	}

	// 查询轮播图
	const loadBanner = () => {
		selectBannerList().then(res => {
			if (res.code == 200) {
				let result = res.data;
				swiperItems.value = [];
				let list = result.filter(item => item.bannerKind == 1);
				list.forEach(item => {
					swiperItems.value.push({
						id: item.id,
						img: item.bannerImg,
						opentype: 'click',
						bannerAddress: item.bannerAddress,
						bannerType: item.bannerType,
						bannerKind: item.bannerKind
					})
				})
			}
		})
	}

	const loadData = () => {
		setTimeout(() => {
			if (isHideTabbar.value) {
				homef.value.loadRc();
			} else {
				homep.value.loadData();
			}
		}, 500)
	}
	const reload = async() => {
		await store.getUserFun(true);
		setTimeout(() => {
			if (isHideTabbar.value) {
				homef.value.reload();
			} else {
				homep.value.reload();
			}
		}, 500)
	}

	const loadMsg = () => {
		selectPromptByOne().then(res => {
			if (res.code == 200) {
				dataResult.value = res.data;
				cautionPopupRef.value.open();
			}
		})
	}

	const jumpSearch = () => {
		if (isHideTabbar.value) {
			$u.to(`/pages/recruit/recruit`, 'switchTab')
		} else {
			$u.to('/pages/post/post', 'switchTab')
		}
	}


	const pageChange = (data) => {
		let {
			value
		} = data;
		if (value == 'stoploadmore') {
			guipage.value.stoploadmore();
		}
		if (value == 'nomore') {
			guipage.value.nomore();
		}
		if (value == 'endReload') {
			guipage.value.endReload();
		}
	}
</script>

<style lang="scss">
	// .bgfff {
	// 	background-color: #f8f8f8;
	// }

	.top-header {
		position: relative;
		padding: 0 28rpx 20rpx 28rpx;

		.header-bg {
			position: fixed;
			left: 0;
			top: 0;
			width: 750rpx;
			opacity: .8;
		}
	}



	.topFixed {

		.index-title {
			margin-bottom: 20rpx;
		}

		.left {
			margin-right: 5rpx;

			.f24 {
				width: 160rpx;
			}

			.icon {
				width: 27rpx;
				margin-right: 10rpx;
			}
		}

		.search {
			padding: 5rpx 35rpx;
			border-radius: 14rpx;
		}
	}

	.box-tip {
		border-radius: 14rpx;
		padding: 16rpx 27rpx;

		.icon {
			width: 27rpx;
			margin-right: 16rpx;
		}
	}

	.swiper {
		margin-top: 18rpx;
	}

	.box-class {
		margin-top: 17rpx;

		.item {
			position: relative;
			padding: 33rpx 0 33rpx 50rpx;

			&:first-child::after {
				content: "";
				position: absolute;
				right: 0;
				bottom: 0;
				width: 0rpx;
				height: 119rpx;
				opacity: 1;
				border: 3rpx solid #F5F5F5;
			}

			image {
				width: 80rpx;
				margin-right: 16rpx;
			}

			.right {
				color: #7D7D7D;

				.desc {
					margin-top: 5rpx;
				}
			}
		}
	}

	.list {
		margin-top: 10rpx;
		padding: 36rpx;

		.service-list {
			margin-top: 4rpx;
			margin-bottom: 70rpx;

			.item {
				position: relative;
				box-sizing: border-box;
				width: 218rpx;
				height: 160rpx;
				padding: 40rpx 5rpx 0 30rpx;
				margin-top: 20rpx;
				margin-right: 12rpx;

				.bg-img {
					position: absolute;
					width: 218rpx;
					height: 160rpx;
					left: 0;
					top: 0;
				}

				.desc {
					margin-top: 10rpx;
				}
			}

			&>.item:nth-child(3n) {
				margin-right: 0;
			}
		}

		.reflesh-icon {
			width: 34rpx;
		}

		.reflesh-icon-true {
			animation: refleshRoute .5s linear infinite;
		}

		@keyframes refleshRoute {
			0% {}

			100% {
				transform: rotate(360deg);
			}
		}
	}
</style>